<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>13.计算属性与assign使用</title>
</head>

<body>
  <script>
    //对象属性可以通过表达式计算定义，这在动态设置属性或执行属性方法时很好用。
    let id = 0;
    let hd = {};
    hd[`id-${id++}`] = id;
    hd[`id-${id++}`] = id;
    hd[`id-${id++}`] = id;
    hd[`id-${id++}`] = id;
    hd[`id-${id++}`] = id;
    console.log(hd);/*{id-0: 1, id-1: 2, id-2: 3, id-3: 4, id-4: 5}*/
    //使用计算属性为文章定义键名
    const lessons = [
      {
        title: "媒体查询响应式布局",
        category: "css"
      },
      {
        title: "FLEX 弹性盒模型",
        category: "css"
      },
      {
        title: "MYSQL多表查询随意操作",
        category: "mysql"
      }
    ];
    let res = lessons.reduce((obj, cur, index) => {
      obj[`${cur["category"]}-${index + 1}`] = cur;
      return obj;
    }, {});
    console.log(res); //{css-1: {…}, css-2: {…}, mysql-3: {…}}
    console.log(JSON.stringify(res, null, 2)); /* {
  "css-1": {
    "title": "媒体查询响应式布局",
    "category": "css"
  },
  "css-2": {
    "title": "FLEX 弹性盒模型",
    "category": "css"
  },
  "mysql-3": {
    "title": "MYSQL多表查询随意操作",
    "category": "mysql"
  }
}*/
    // assign 合并对象
    let obj = Object.assign({ a: 1 }, { b: 2 } );
    console.log(obj); //{a: 1, b: 2}
    // jquery.expand  ,loadash , ...展开语法现在都可以实现对象合并了
    function upLoad(params){
      let options = {
        size: 19999
      };
      options = Object.assign(options,params);
      console.log(JSON.stringify(options,null,2)); 
      /*{
           "size": 99,
           "type": "jpeg"
      } */
    }
    upLoad({size: 99, type: "jpeg"});
  </script>
</body>

</html>